<template>
	<div class="input-box">
		<input @keyup.13="handleKeyUp" type="text" v-model.trim="value">
	</div>
</template>

<script>
export default {
	name: "InputBox",
	data () {
		return {
			value: ""
		}
	},
	methods: {
		handleKeyUp() {
			if (this.value === "") { 
				return; 
			}

			this.$emit("addItem", this.value);
			this.value = "";
		}
	}
}
</script>

<style lang="scss" scoped>
.input-box {
	display: flex;
	width: 500px;
	height: 40px;
	margin: 0 auto;
	background: #CCC;

	input{
		width: 100%;
		height: 40px;
		border: 1px solid #CCC;
		padding: 0 10px;
		font-size: 20px;
	}
}
</style>
